<template>
    <div>
<!--        修改信息开始-->
        <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="unit">
                <el-form-item label="设备名称" :label-width="formLabelWidth">
                    <el-input v-model="unit.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-input v-model="unit.type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密级" :label-width="formLabelWidth">
                    <el-input v-model="unit.mi" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="unit.demo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUnit(unit)">确 定</el-button>
            </div>
        </el-dialog>
<!--        修改信息结束-->
        <el-row>
            <el-col :span='6'>
                <el-row>
                    <el-col :span='12'>
                        <el-input v-model='searchValue' placeholder='请输入机器名称'></el-input>
                    </el-col>
                    <el-col :span='12'>
                        <el-button type='primary' v-on:click='search'>检索</el-button>
                    </el-col>
                </el-row>
                <br>
                <br>
                <el-card>
                    <div style='color: white' class='lieb' v-for='item in tableData' v-on:click='unitInfoClick(item)' > {{item.name}}</div>
                    <el-pagination
                        background
                        small
                        layout="prev, pager, next"
                        @current-change='changeCurrent'
                        :current-page='current'
                        :total="total">
                    </el-pagination>
                </el-card>
            </el-col>
            <el-col :span='18'>
                <el-descriptions class="margin-top info" title="粮食机器配件" :column="3" border>
                    <template slot="extra">
                        <el-button type="primary" @click="dialogFormVisible = true" size="small">修改信息</el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            设备名称
                        </template>
                        {{unit.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            编号
                        </template>
                        {{unit.account}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            类型
                        </template>
                        {{unit.type}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            使用时间
                        </template>
                        {{unit.playDept}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            出厂时间
                        </template>
                        {{unit.chuT}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            保修时间(月)
                        </template>
                        {{unit.baoT}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            密级
                        </template>
                        <el-tag size="small"> {{unit.mi}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            备注
                        </template>
                        {{unit.demo}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/unit/list").then(res => {
            this.tableData = res.records
            this.current = res.current
            this.total = res.total
            this.unit = this.tableData[0]
        })
    },
    data(){
        return{
            tableData:[],
            current:1,
            total:100,
            searchValue:'',
            unit:{
                // account:'',
                // type:'',
                // name:'',
                // playDept:'',
                // chuT:'',
                // baoT:null,
                // mi:'',
                // demo:'',
                // zhuangtai:''
            },
            dialogFormVisible: false,
            formLabelWidth: '120px'
        }
    },
    methods:{
        changeCurrent(page){
            this.$http.get("/v1/unit/list?page="+page * 1).then(res => {
                this.tableData = res.records
                this.current = res.current
                this.total = res.total
            })
        },
        search(){
            this.$http.get("/v1/unit/search?name="+this.searchValue).then(res =>{
                this.tableData = res
                this.current = 1
                this.total = 1
            })
        },
        unitInfoClick(item){
            this.unit = item
        },
        updateUnit(data){
            this.$http.post("/v1/unit/save",data).then(res =>{
                this.dialogFormVisible = false
                this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                });
            })
        }
    }
}
</script>

<style scoped>
.lieb{
    font-size: large;
    text-align: center;
    background-color: #0d638f;
    height: 50px;
    width: 200px;
    cursor:pointer;
    margin: 10px;
}
.info{
    margin-left: 5%;
}
</style>
